<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册页面</title>
    <style type="text/css">@import url(styles.css);</style>
</head>
<body>
<div class="container">
    <!-- 登录表单 -->
    <div id="login-form">
        <h2>登录</h2>
        <form>
            <div class="form-group">
                <label for="login-username">姓名</label>
                <input type="text" id="login-username" name="username" required>
            </div>
            <div class="form-group">
                <label for="login-son">学号</label>
                <input type="text" id="login-son" name="son" required>
            </div>
            <div class="form-group">
                <label for="login-password">密码</label>
                <input type="password" id="login-password" name="password" required>
            </div>
            <button type="submit">登录</button>
        </form>
        <div class="switch-form">
            还没有账号？<a href="#" id="show-register">立即注册</a>
        </div>
    </div>

    <!-- 注册表单 -->
    <div id="register-form" class="hidden">
        <h2>注册</h2>
        <form>
            <div class="form-group">
                <label for="register-username">姓名</label>
                <input type="text" id="register-username" name="username" required>
            </div>
            <div class="form-group">
                <label for="register-son">学号</label>
                <input type="text" id="register-son" name="son" required>
            </div>
            <div class="form-group">
                <label>性别</label>
                <div class="radio-group">
                    <input type="radio" id="gender-male" name="gender" value="male" checked>
                    <label for="gender-male">男</label>
                    <input type="radio" id="gender-female" name="gender" value="female">
                    <label for="gender-female">女</label>
                </div>
            </div>
            <div class="form-group">
                <label for="register-academy">学院</label>
                <input type="text" id="register-academy" name="academy" required>
            </div>
            <div class="form-group">
                <label for="register-email">电子邮箱</label>
                <input type="email" id="register-email" name="email" required>
            </div>
            <div class="form-group">
                <label for="register-password">密码</label>
                <input type="password" id="register-password" name="password" required>
            </div>
            <div class="form-group">
                <label for="register-confirm-password">确认密码</label>
                <input type="password" id="register-confirm-password" name="confirm-password" required>
            </div>
            <button type="submit">注册</button>
        </form>
        <div class="switch-form">
            已有账号？<a href="#" id="show-login">立即登录</a>
        </div>
    </div>
</div>

<script>
    // 切换登录和注册表单
    document.getElementById('show-register').addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById('login-form').classList.add('hidden');
        document.getElementById('register-form').classList.remove('hidden');
    });

    document.getElementById('show-login').addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById('register-form').classList.add('hidden');
        document.getElementById('login-form').classList.remove('hidden');
    });

    // 简单的表单验证
    document.querySelector('#register-form form').addEventListener('submit', function(e) {
        const password = document.getElementById('register-password').value;
        const confirmPassword = document.getElementById('register-confirm-password').value;

        if (password !== confirmPassword) {
            e.preventDefault();
            alert('两次输入的密码不一致！');
        }
    });
</script>
</body>
</html>